<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
   <div  @click="handleClick"> {{message}}</div>
    <my-item></my-item>
</div>
<script>

    //Vue 组件 也是 Vue的实例
    Vue.component("my-item",{
        template:"<div>hello component</div>"
    })

    //创建Vue 根实例
    const  vm = new Vue(
        {
            el:"#app",
            data:{
                message:'Hello Vue!'
            },
            methods:{
                handleClick:function () {
                    this.message='Hello world!'
                }
            }
        }
    )
    //通过$ 访问Vue实例暴露的property 和方法

    vm.$watch('message',function () {
        console.log("message 发生变化");
    })

   console.log(vm.$data)
   console.log(vm.$el)


</script>


</body>
</html>